<template>
  <view>
    <view class="header">
      <view class="back" @click="back()">
        <uni-icons type="left" size="20"></uni-icons>
      </view>
      <text>每日答题</text>
    </view>
    <view class="answer" v-if='status==1'>
      <view class="questions-type">
        {{questionsInfo[page].type}} （{{questionsInfo[page].integral}}.0分）
      </view>
      <view class="questions-title">
        {{page+1}}.{{questionsInfo[page].question}}
      </view>
      <template v-if='questionsInfo[page].type==="单选题"'>
        <block v-for="(item,index) in questionsInfo[page].option.split(',')" :key='index'>
          <questions-option :index='index' :name='item' :active='active' @choose='choose'></questions-option>
        </block>
      </template>
      <template v-else-if='questionsInfo[page].type==="多选题"'>
        <block v-for="(item1,index1) in questionsInfo[page].option.split(',')" :key='index1'>
          <questions-multioption :index='index1' :name='item1' :active='active'
            @multichoose='multichoose'></questions-multioption>
        </block>
      </template>
      <template v-else>
        <block v-for="(item2,index2) in questionsInfo[page].option.split(',')" :key='index2'>
          <questions-option :index='index2' :name='item2' :active='active' @choose='choose'></questions-option>
        </block>
      </template>
      <view class="footer">
        <view class="front" @click="front()" :style="{visibility: page==0?'hidden':'visable'}">
          上一题
        </view>
        <view class="pages">
          {{page+1}}/{{questionsInfo.length}}
        </view>
        <view class="next" @click="next()" v-if="page<questionsInfo.length-1">
          下一题
        </view>
        <view class="submit" @click="submit()" v-else>
          提交
        </view>
      </view>
    </view>
    <view class="result" v-else>
      <view class="title">
        提交成功
      </view>
      <view class="score">
        <text class="text">获得</text>
        <text class="value">{{totalScore}}</text>
        <text class="text">积分</text>
      </view>
      <view class="score-Info">
        <view class="name">
          用户 ： {{userInfo.nickName}}
        </view>
        <view class="total">
          总题数 ： {{questionsInfo.length}}
        </view>
        <view class="count">
          答对题数 : {{correctCount}}
        </view>
      </view>
      <view class="tip">
        每日首次答题计入积分!
      </view>
      <view class="result-footer">
        <view class="begin" @click="reset()">
          重新挑战
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  export default {
    data() {
      return {
        status: 1,
        page: 0,
        active: -1,
        questionsInfo: [],
        options: [0],
        totalScore: 0,
        correctCount: 0,
      };
    },
    created() {
      this.getQuestionsInfo()
    },
    methods: {
      back() {
        uni.navigateBack()
      },
      async getQuestionsInfo() {
        const data = await uni.$http.get(`/users/questions/getDailyQuestions/${this.userInfo.studentId}`)
        this.questionsInfo = data.data.data
        console.log(data);
        let obj = {}
        let str = ''
        for (let i = 0; i < this.questionsInfo.length; i++) {
          if (this.questionsInfo[i].type == '单选题') {
            obj = JSON.parse(this.questionsInfo[i].option)
            str = Object.keys(obj).map(key => `${key}:${obj[key]}`).join(',')
            this.questionsInfo[i].option = str
          } else if (this.questionsInfo[i].type == '判断题') {
            obj = JSON.parse(this.questionsInfo[i].option)
            str = Object.keys(obj).map(key => `${Number(key)+1}:${obj[key]}`).join(',')
            this.questionsInfo[i].option = str
          } else if (this.questionsInfo[i].type == '多选题') {
            obj = JSON.parse(this.questionsInfo[i].option)
            str = Object.keys(obj).map(key => `${key}:${obj[key]}`).join(',')
            this.questionsInfo[i].option = str
          }
        }

        this.options.length = this.questionsInfo.length
        for (let i = 0; i < this.options.length; i++) {
          if (this.questionsInfo[i].type == '单选题') {
            this.options[i] = -1
          } else if (this.questionsInfo[i].type == '判断题') {
            this.options[i] = -1
          } else if (this.questionsInfo[i].type == '多选题') {
            this.options[i] = [0]
            this.options[i].length = this.questionsInfo[i].option.split(',').length
            for (let j = 0; j < this.options[i].length; j++) {
              this.options[i][j] = -1
            }
          }
        }
        this.active = this.options[0]
      },
      choose(i) {
        this.active = i
        this.options[this.page] = i
      },
      multichoose(i) {
        const arr = this.active.concat()
        arr[i] = -arr[i]
        this.active = arr
        this.options[this.page][i] = -this.options[this.page][i];
      },
      front() {
        this.page--
        this.active = this.options[this.page]
      },
      next() {
        this.page++
        this.active = this.options[this.page]
      },
      submit() {
        let that = this
        uni.showModal({
          content: '您确定现在提交吗？',
          confirmColor: '#046404',
          success: function(res) {
            if (res.confirm) {
              that.send()
            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          }
        })
      },
      async send() {
        let arr = []
        const correct = ['A', 'B', 'C', 'D', 'E', 'F']
        for (let i = 0; i < this.questionsInfo.length; i++) {
          let result = {}
          result.questionId = this.questionsInfo[i].id
          if (this.questionsInfo[i].type == '单选题') {
            result.answer = correct[this.options[i]]
            result.isCorrect = this.options[i] === correct.indexOf(this
              .questionsInfo[i]
              .correctAnswer) ? 1 : 0
          } else if (this.questionsInfo[i].type == '判断题') {
            if (this.options[i] != -1) {
              result.answer = this.questionsInfo[i].option.split(',')[this.options[i]].substring(2);
              result.isCorrect = this.questionsInfo[i].option.split(',')[this.options[i]].substring(2) === this
                .questionsInfo[i]
                .correctAnswer ? 1 : 0
            } else {
              result.answer = null;
              result.isCorrect = 0
            }
          } else if (this.questionsInfo[i].type == '多选题') {
            result.answer = ''
            for (let j = 0; j < this.options[i].length; j++) {
              if (this.options[i][j] == 1) {
                result.answer += correct[j]
              }
            }
            result.isCorrect = this.questionsInfo[i].correctAnswer === result.answer ? 1 : 0
          }
          result.score = result.isCorrect * this.questionsInfo[i].integral
          this.totalScore += result.score
          this.correctCount += result.isCorrect
          arr.push(result)
        }
        await uni.$http.post('/users/questions/judgeQuestions', {
          userId: this.userInfo.studentId,
          judgeDTOS: arr
        })
        console.log(arr);
        this.status = 0
      },
      reset() {
        this.active = -1
        this.page = 0
        this.totalScore = 0
        this.correctCount = 0
        this.status = 1
        this.getQuestionsInfo()
      }
    },
    computed: {
      ...mapState('my_user', ['userInfo'])
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #fff;
  }
  
  .header {
    position: relative;
    width: 100%;
    height: 140rpx;
    text-align: center;
    font-size: 36rpx;
    font-weight: 700;
    line-height: 170rpx;
    background-color: #fff;
    
    .back{
      position: absolute;
      top: 4rpx;
      left: 23rpx;
      height: 50rpx;
    }
  }

  .questions-type {
    position: relative;
    margin-top: 30rpx;
    padding: 0 40rpx;
    font-size: 36rpx;
    font-weight: 700;

    &::before {
      content: ' ';
      display: block;
      width: 3px;
      height: 20px;
      background-color: #b6eaae;
      position: absolute;
      left: 20rpx;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  .questions-title {
    margin-top: 30rpx;
    margin-bottom: 20rpx;
    line-height: 60rpx;
    padding: 0 20rpx;
    font-size: 36rpx;
    color: #555;
  }

  .footer {
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 120rpx;
    padding: 20rpx 40rpx;
    border-top: 1rpx solid #eee;
    color: #046404;
    font-size: 30rpx;
    box-sizing: border-box;
  }

  .result {
    display: flex;
    flex-direction: column;
    align-items: center;

    .title {
      margin-top: 220rpx;
      font-size: 60rpx;
      color: #046404;
      letter-spacing: 2rpx;
    }

    .score {
      margin-top: 50rpx;

      .value {
        padding: 0 40rpx;
        font-size: 80rpx;
      }
    }

    .score-Info {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      width: 80%;
      height: 200rpx;
      margin: 40rpx auto;
      padding: 10rpx 30rpx;
      background-color: #eee;
      box-sizing: border-box;

      .name,
      .total,
      .count {
        font-size: 30rpx;
        color: #666;
      }
    }

    .tip {
      font-size: 26rpx;
      letter-spacing: 0.5rpx;
      color: #ff7000;
    }

    .result-footer {
      position: fixed;
      bottom: 0;
      width: 100%;
      height: 130rpx;
      padding: 20rpx 30rpx;

      .begin {
        width: 90%;
        height: 90rpx;
        margin: 0 auto;
        border-radius: 6rpx;
        text-align: center;
        line-height: 90rpx;
        background-color: #046404;
        color: #fff;
        font-size: 38rpx;
      }
    }
  }
</style>